// pages/music-player/music-player.js
import { throttle } from "underscore"
import playerStore, {audioContext} from "../../../store/playerStore"

const app = getApp()

const modeNames = ["order", "repeat", "random"]

Page({
  data: {
    stateKeys:["id", "currentSong", "durationTime", "currentTime", "lyricInfos", "currentLyricText", "currentLyricIndex", "isPlaying", "playModeIndex"],

    id: 0,
    currentSong: {},
    currentTime: 0,
    durationTime: 0,
    lyricInfos: [],
    currentLyricText: "",  //当前歌词文本
    currentLyricIndex: -1,

    isPlaying: true,

    playSongIndex: 0,
    playSongList: [],
    isFirstPlay: true,

    // playModeIndex: 0,  // 0:顺序播放，1:单曲循环，2:随机播放
    playModeName: "order",

    pageTitles: ["歌曲", "歌词"],
    currentPage: 0,
    contentHeight: 0,
    sliderValue: 0,
    isSliderChanging: false,
    isWaiting: false,

    lyricScrollTop: 0,
    // statusHeight: 20,
    
  }, 
  onLoad(options) {
    // 0.获取设备信息
    this.setData({ 
      statusHeight: app.globalData.statusHeight,
      contentHeight: app.globalData.contentHeight
    })

    // 1.获取传入的id
    const id = options.id

    // 2.根据id播放歌曲
    // this.steupPlaySong(id)
    if (id) {
      playerStore.dispatch("playMusicWithSongIdAction", id)
    }
    
    // 5.获取store共享数据
    playerStore.onStates(["playSongList", "playSongIndex"], this.getPlaySongInfosHandler)
    playerStore.onStates(this.data.stateKeys, this.getPlayerInfosHandler)
  },

  // 更新进度条方法放入节流
  updateProgress: throttle(function(currentTime) {
    if (this.data.isSliderChanging) return
    // 1.记录当前时间  // 2.修改sliderValue
    const sliderValue = currentTime / this.data.durationTime * 100
    this.setData({ currentTime, sliderValue })
  }, 800, {leading:false,trailing:false}),

  // ----------事件监听------------
  // 返回按钮
  onNavBackTap() {
    wx.navigateBack()
  },
  onSwiperChange(event) {
    this.setData({currentPage: event.detail.current})
  },
  onNavItemTap(event) {
    const index = event.currentTarget.dataset.index
    this.setData({ currentPage: index })
  },
  // 点击进度条
  onSliderChange(event) {
    this.data.isWaiting = true
    setTimeout(() => {
      this.data.isWaiting = false
    }, 1500)
    // 获取点击滑块位置对应的值
    const value = event.detail.value
    // 计算出要播放的位置时间
    const currentTime = value / 100 * this.data.durationTime
    // 设置播放器，播放计算出的时间
    audioContext.seek(currentTime / 1000)
    this.setData({ currentTime, isSliderChanging: false, sliderValue: value })
    // 当前是暂停转态，点击进度条开启音乐的并且按钮暂停状态改为开启状态
    if (!this.data.isPlaying) {
      this.setData({isPlaying: true})
    }
  },
  // 滑动进度条
  onSliderChanging: throttle(function(event) {
    // 获取滑动到位置的value
    const value = event.detail.value
    // 根据当前值，计算出对应的时间
    const currentTime = value / 100 * this.data.durationTime
    this.setData({ currentTime })
    // 当前正在滑动
    this.data.isSliderChanging = true
    // 当前是暂停转态，滑动进度条开启音乐的并且按钮暂停状态改为开启状态
    if (!this.data.isPlaying) {
      this.setData({isPlaying: true})
    }
  }, 100),

  // 暂停和播放音乐按钮事件
  onPlayOrPauseTap() {
    playerStore.dispatch("changeMusicStatusAction")
  },
  // 监听点击播放上一首歌曲
  onPreBtnTap() {
    // this.changeNewSong(false)
    playerStore.dispatch("playNewMusicAction", false)
  },
  // 监听点击播放下一首歌曲
  onNextBtnTap() {
    // this.changeNewSong()
    playerStore.dispatch("playNewMusicAction")
  },
  // 监听循环，单曲，随机播放的函数
  onModeBtnTap() {
    playerStore.dispatch("changePlayModeAction")
  },

  // ----------store共享数据--------------
  getPlaySongInfosHandler({playSongList, playSongIndex}) {
    // console.log(value);
    if (playSongList) {
      this.setData({playSongList})
    }
    if (playSongIndex !== undefined) {
      this.setData({playSongIndex})
    }
  },
  getPlayerInfosHandler({
    id, currentSong, durationTime, currentTime, lyricInfos, currentLyricIndex, currentLyricText, isPlaying,
    playModeIndex
  }) {
    if (id !== undefined) {
      this.setData({ id })
    }
    if (currentSong) {
      this.setData({currentSong})
    }
    if (durationTime !== undefined) {
      this.setData({durationTime})
    }
    if (currentTime !== undefined) {
      // this.setData({currentTime})
      // 根据当前时间改变进度
      this.updateProgress(currentTime)
    }
    if (lyricInfos) {
      this.setData({lyricInfos})
    }
    if (currentLyricText) {
      this.setData({currentLyricText})
    }
    if (currentLyricIndex !== undefined) {
      this.setData({currentLyricIndex, lyricScrollTop: currentLyricIndex * 35})
    }
    if (isPlaying !== undefined) {
      this.setData({isPlaying})
    }
    if (playModeIndex != undefined) {
      this.setData({playModeName: modeNames[playModeIndex]})
    }
  },

  onUnload() {
    playerStore.offStates(["playSongList", "playSongIndex"], this.getPlaySongInfosHandler)
    playerStore.offStates(this.data.stateKeys, this.getPlayerInfosHandler)
  }
})